import React from 'react'
import './TodoList.css'
import TodoItem from './TodoItem'

class TodoList extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            inputValue: 'we ',
            list: ['学习英文', '学习react', '123']
        }
    }
    render(){
        return (
            <React.Fragment>
                <div>
                    <label htmlFor="insertArea">输入内容</label>
                    <input id='insertArea' className='input' value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
                    <button onClick={this.handleButtonClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item, index)=>{
                            return(<TodoItem content = {item} index = {index} deleteItem = {this.handleItemClick.bind(this)}/>)
                        })
                    }
                </ul>
            </React.Fragment>
        )
    }

    handleInputChange(e){
        this.setState(
            {inputValue:  e.target.value}
        )
        // this.state.inputValue =
        // console.log(e.target.value)
    }

    handleButtonClick(){
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }

    // handleItem

    handleItemClick(index){
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list: list
        })

    }
}

export default TodoList